<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
	<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
	<title>Hello APP</title>
	<link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
	<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
	<link rel="stylesheet" type="text/css" href="../../css/common.css" />
	<style>
	</style>
</head>

<body class="bg-f5">
	<div class="comFlowBox">
		<div class="comGodList" id="data_html">
			<div class="grid-sizer"></div>

		</div>
	</div>
		<div class="notData aui-hide aui-flex-row aui-flex-middle">
			<img src="../../image/notdata/10.png" alt="">
			<div>没有找到相关文章</div>
		</div>
	<script type="text/x-dot-template" id="data_tpl">
		{{ for(var i in it){ }}
		<div class="item" data-id="{{=it[i].article_id}}" data-userid="{{=it[i].article_userid}}">
			<div class="inner">
				<div class="photo"  tapmode onClick="openPostDetail({{=it[i].article_id}})"><img src="{{=it[i].article_cover}}" alt=""></div>
				<div class="textBox">
					<div class="title aui-flex-col aui-flex-middle">
						<div class="aui-ellipsis-2">{{=it[i].article_content}}</div>
					</div>
					<div class="btmInfo aui-flex-col aui-flex-middle aui-flex-between">
						<div>
							<div class="avatar"><img src="{{=it[i].user_avatar}}" alt=""></div>
						</div>
						<div class="flex-auto name aui-ellipsis-1">{{=it[i].user_nickname || ''}}</div>
						{{if(it[i].is_like == -1){}}
						<div class="like" tapmode onClick="togLike(this)">{{=it[i].like_count || '0'}}</div>
						{{}else {}}
						<div class="like on" tapmode onClick="togLike(this)">{{=it[i].like_count || '0'}}</div>
						{{}}}
					</div>
				</div>
			</div>
		</div>
		{{}}}
	</script>
</body>
<script type="text/javascript" src="../../script/import.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript" src="../../script/masonry.pkgd.min.js"></script>
<script type="text/javascript">
	var currentSearch = '';
	var gridDom = '#data_html';
	var grid;
	var currentPage = 1;
	var pageSize = 50;
	var num = 0;
	var loadFlag = true;
	var isLoading = false;
	var postData = {};
	apiready = function() {
		api.parseTapmode();
		api.addEventListener({
				name: 'isLikeEvent'
		}, function(ret, err){
				if( ret ){
					console.log(1)
						 getData(num)
				}else{
						 alert( JSON.stringify( err ) );
				}
		});
		// 监听到达底部
		api.addEventListener({
			name: 'scrolltobottom',
			extra: {
				threshold: 0
			}
		}, function(ret, err) {
			if(currentSearch){
				console.log(currentSearch)
				getData(num);
			 }
		});
		getData(num)


	};
	//搜索事件
	function searchFn(txt) {
		if (!txt) {
			return;
		}
		loadFlag = true;
		currentSearch = txt;
		console.log(currentSearch)
		currentPage = 1;
		postData = {
			pageSize: pageSize
		}
		getData(num);

	}

	function getData(ind) {
		console.log(ind)
		if (num != ind) {
			num = ind
			currentPage = 1
		}
		showProgress();
		isLoading = true;
		postData.userid = getUserId();
		postData.keywords = currentSearch;
		postData.orderby = ind;
		postData.pageNo = currentPage;
		postData.pageSize = pageSize;
		console.log(JSON.stringify(postData))
		api.ajax({
			url: BASE_URL + 'App/Article/articleList',
			method: 'post',
			data: {
				values: postData,
			}
		}, function(ret, err) {
			if (ret) {
				if (ret.code == 1 && ret.data.length > 0) {
					getFlow(ret.data);
					currentPage++;
					api.parseTapmode();
					//如果加载出来的数量 小于 pagesize 说明到底线了
					if (ret.data.length < pageSize) {
						loadFlag = false;
					}
				} else {
					if (currentPage == 1) {
						// $$('#data_html').html('');
						showNoData();
					}
					loadFlag = false;
				}
			}
			isLoading = false;
			hideProgress();
		});
	}

	function showNoData() {
		$$('#data_html').addClass('aui-hide');
		$$('.notData').removeClass('aui-hide');
		$$('body').removeClass('bg-f5');
		api.parseTapmode();
	}
	//调用瀑布流
	grid = new Masonry(gridDom, {
		columnWidth: '.grid-sizer',
		itemSelector: '.item',
		percentPosition: true
	});
	imagesLoaded(gridDom, function() {
		grid.layout();
	});

	//瀑布流
	function getFlow(flowData) {
		var tpl = $$('#data_tpl').html();
		var tempFn = doT.template(tpl);
		var elem = $$(tempFn(flowData));
		if (currentPage == 1) {
			$$('#data_html').html('<div class="grid-sizer"></div>');
		}
		$$(gridDom).append(elem);
		grid.appended(elem);
		imagesLoaded(gridDom, function() {
			grid.layout();
		});

		// api.parseTapmode();
	}
	//喜欢 不喜欢切换
	function togLike(el){
		var _this = $$(el);
		var item = _this.parents('.item');
		var itemId = item.data('id');
		var userId = item.data('userid');
		var count = parseInt(_this.html());
		api.ajax({
				url: BASE_URL + 'App/Article/articleLike',
				method: 'post',
				data: {
						values: {
							userid: getUserId(),
							article_id: itemId,
							article_userid: userId
						}
				}
		},function(ret, err){
				if (ret) {
						if(ret.code == 1){
							if(ret.msg == '点赞成功'){
								_this.addClass('on');
								count+=1;
								_this.html(count);
							}else{
								_this.removeClass('on');
								count-=1;
								_this.html(count);
							}
							toast(ret.msg)
						}
				}else{
					toast(ret.msg)
				}
		});
	}
</script>

</html>
